<template>
	<div class="home">
		<el-form
			label-width="80px"
			style="
				width: 500px;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
			"
			:model="form"
		>
			<el-form-item>
				<el-button @click="account = true">账号登录</el-button>
				<el-button @click="account = false">邮箱登录</el-button><br />
			</el-form-item>
			<template v-if="account">
				<el-form-item label="账号/邮箱:">
					<el-input v-model="form.account" />
				</el-form-item>
				<el-form-item label="密码:">
					<el-input v-model="form.pwd" />
				</el-form-item>
				<el-form-item>
					<el-button style="margin: 5px" @click="handleLogin"
						>登陆</el-button
					></el-form-item
				>
			</template>
			<template v-else>
				<el-form-item label="邮箱:"> <el-input /> </el-form-item>
				<el-form-item label="验证码:">
					<el-input />
					<el-button style="margin: 5px">发送验证码</el-button>
				</el-form-item>
			</template>

			<el-form-item style="display: flex; justify-content: center">
				<a
					:href="`https://gitee.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code`"
					>第三方gitee码云登陆</a
				>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'Home',
	data() {
		return {
			form: {
				account: '',
				pwd: ''
			},
			account: true,
			// 第三方账户id
			client_id:
				'305c8b4077e5026dff7d5002400521b156be74388a646fb64a1cb87eafca2e21',
			// 重定向url
			redirect_uri: 'http://localhost:7001/api/oauth/redirect'
		}
	},
	created() {},
	mounted() {
		console.log('路由信息：', this.$route)
	},
	methods: {
		async handleLogin() {
			const loginObj = {
				email: this.form.account,
				password: this.form.pwd
			}
			const data = await this.$http.post('/api/login-mouth', loginObj)
			console.log('datA:', data)
			window.localStorage.setItem('token', data.token)
			this.$router.push('/home')
		},
		emailLogin() {
			// axios.get('/api/nodeEmail').then((res) => {})
		}
	}
}
</script>
<style lang="">
/* .box {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
} */
</style>
